<template>
      <div class="constraint">
            <div class="news-tit-box clr-black">
                  <h2>最新动态</h2>
            </div>
            <div class="news-content-area mar-bot">
                  <ul class="flex item-column">
                        <div class="trends-lft-box">
                              <li :class="['flex', index == 1 || index == 2 ? 'tr-column' : 'tr-row']" v-for="(item, index) in 4" :key="index">
                                    <a href="/news/index.html" target="_blank">
                                          <div class="tr_img-box of_hidden">
                                                <img src="https://static.www.tencent.com/uploads/2023/09/11/dbea7da494a02adbe59ea31c89f32483.jpg"
                                                      alt="">
                                          </div>
                                          <div class="m-txt-box flex flex-column">
                                                <div class="flex-1">
                                                      <h3 class="text-ellipsis-2">重塑城市交通：腾讯WeCityX助力建设绿色城市</h3>
                                                      <p class="text-ellipsis-3">通过重塑城市交通概念，我们可以统揽全局，以协同和可持续的方式打造安全、经济、便捷的交通系统。</p>
                                                </div>
                                                <div class="timer ft-bold">
                                                      <span>2023.4.18</span>
                                                </div>
                                          </div>
                                    </a>
                              </li>
                        </div>
                        <div class="trends-rgt-box">
                              <li class="overflow_hidden" v-for="(item, index) in 3" :key="index">
                                    <a href="/news/index.html" target="_blank">
                                          <div class="tr_img-box of_hidden">
                                                <img src="https://static.www.tencent.com/uploads/2023/09/27/09128031e31fc7e4a767e941f13500f5.png!article.cover"
                                                      alt="">
                                          </div>
                                          <div class="m-txt-box flex flex-column">
                                                <div class="flex-1">
                                                      <h3 class="text-ellipsis-2">重塑城市交通：腾讯WeCityX助力建设绿色城市</h3>
                                                      <p class="text-ellipsis-3">通过重塑城市交通概念，我们可以统揽全局，以协同和可持续的方式打造安全、经济、便捷的交通系统。</p>
                                                </div>
                                                <div class="timer ft-bold">
                                                      <span>2023.4.18</span>
                                                </div>
                                          </div>
                                    </a>
                              </li>
                        </div>
                  </ul>
            </div>
      </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter()
</script>